<template>
	<view class="contact-info-container">
		<view class="info-module card">
			<text class="module-title">联系信息</text>
			<view class="contact-name-item">
				<text class="item-label">联系人</text>
				<input class="contact-name-input" type="text" v-model="contactInfo.contactName" placeholder="请输入联系人姓名" />
			</view>
			<view class="phone-item">
				<text class="item-label">中国 +86</text>
				<input class="phone-input" type="number" v-model="contactInfo.contactPhone" placeholder="请输入手机号" />
				<image v-if="contactInfo.contactPhone" class="clear-icon" src="/static/clear.png"
					@click="contactInfo.contactPhone = ''"></image>
			</view>
		
			<view class="email-item">
				<text class="item-label">邮箱</text>
				<input class="email-input" type="email" v-model="contactInfo.contactEmail" placeholder="请输入邮箱" />
			</view>
		</view>
		<view class="info-module card">
			<text class="module-title">入住人信息</text>
			<view v-for="item in roomsList" :key="item">


				<view class="room-info">
					<text class="room-text">{{item.roomIndex}}房</text>
					<view class="">
						<text class="people-text">{{ Number(item.adultGuests)+Number(item.childrenAges) }}人</text>
						<text @click="addCompanion(item)" class="add-icon">+同住人</text>
					</view>
				</view>

				<!-- 主入住人 -->
				<view class="guest-card" v-for="primaryGuest in item.guests" :key="primaryGuest">
					<view class="guest-header">
						<text class="guest-type">{{primaryGuest.isPrimary ?'主入住人':'同住人'}}</text>
						<text class="delete-btn" v-if="!primaryGuest.isPrimary" @click="removeCompanion(item.guests,removeCompanion)">删除</text>
					</view>
					<view class="guest-form">
						<view class="name-group">
							<view class="name-item">
								<text class="name-label">姓：</text>
								<input class="name-input" v-model="primaryGuest.firstName" placeholder="请输入" />
							</view>
							<view class="name-item">
								<text class="name-label">名：</text>
								<input class="name-input" v-model="primaryGuest.lastName" placeholder="请输入" />
							</view>
						</view>
						<!-- <view class="gender-group">
							
							<view class="gender-buttons">
								<text class="gender-btn" :class="{ active: primaryGuest.gender === 'male' }"
									@click="primaryGuest.gender = 'male'">男</text>
								<text class="gender-btn" :class="{ active: primaryGuest.gender === 'female' }"
									@click="primaryGuest.gender = 'female'">女</text>
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 提示信息 -->
			<view class="tips">
				<!-- <image src="/static/info.png" class="tips-icon"></image> -->
				<text class="tips-text">所有入住客人的姓名需与证件一致，否则酒店有权拒绝入住</text>
			</view>

			<!-- 提交按钮 -->
			<!-- <button class="submit-btn" @click="submitForm">提交</button> -->
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import type { rooms } from '@/types'
	const props = defineProps<{
		contactInfo : {
			contactPhone : string,
			contactName : string,
			contactEmail : string,
		},
		rooms : []
	}>()
	const roomsList = ref<rooms[]>(props.rooms)
	// 主入住人信息
	const primaryGuest = ref({
		lastName: '',
		firstName: '',
		gender: ''
	});

	// 同住人列表
	const companions = ref([]);
	// 计算总人数
	const totalGuests = computed(() => {
		return 1 + companions.value.length; // 主入住人 + 同住人
	});
	const maxCompanions = totalGuests.value - 1; // 最多添加3位同住人

	// 添加同住人
	const addCompanion = (item : rooms) => {
		console.log(item)
		// if (Number(item.adultGuests) + Number(item.childrenAges) > 1 && item.guests.length < Number(item.adultGuests) + Number(item.childrenAges)) {
			item.guests.push({
				firstName: "", lastName: "", isPrimary: false
			})
		// }
	};

	// 删除同住人
	const removeCompanion = (arr,item) => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这位同住人吗？',
			success: (res) => {
				if (res.confirm) {
					arr.splice(arr.indexOf(item), 1);
				}
			}
		});
	};

	// 表单提交
	const submitForm = () => {
		// 基础验证
		if (!contactInfo.value.phone) {
			return uni.showToast({
				title: '请填写手机号',
				icon: 'none'
			});
		}

		if (!primaryGuest.value.lastName || !primaryGuest.value.firstName) {
			return uni.showToast({
				title: '请填写主入住人姓名',
				icon: 'none'
			});
		}

		// 收集所有入住人信息
		const formData = {
			contactInfo: contactInfo.value,
			primaryGuest: primaryGuest.value,
			companions: companions.value,
			totalGuests: totalGuests.value
		};

		console.log('提交表单数据:', formData);

		// 实际项目中这里会调用接口提交数据
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		});
	};
</script>

<style scoped>
	.contact-info-container {
		/* padding: 20rpx; */
		/* background-color: #f5f5f5; */
		/* min-height: 100vh; */
	}

	.info-module {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.module-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 30rpx;
		display: block;
	}

	/* 联系信息样式 */
	.phone-item,
	.contact-name-item,
	.email-item {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.item-label {
		font-size: 28rpx;
		color: #666;
		width: 140rpx;
	}

	.phone-input,
	.contact-name-input,
	.email-input {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid #eee;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.clear-icon {
		width: 36rpx;
		height: 36rpx;
		margin-left: -50rpx;
		margin-right: 20rpx;
	}

	/* 入住人信息样式 */
	.room-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.room-text,
	.people-text {
		font-size: 28rpx;
		color: #333;
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		padding: 0 20rpx;
		background-color: #007aff;
		color: #fff;
		border-radius: 30rpx;
		font-size: 26rpx;
	}

	.add-btn:disabled {
		background-color: #ccc;
	}

	.add-icon {
		padding-left: 20rpx;
		margin-right: 8rpx;
		font-size: 30rpx;
		color: #007aff;
	}

	/* 入住人卡片样式 */
	.guest-card {
		background-color: #f9f9f9;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.companion-card {
		background-color: #f0f7ff;
	}

	.guest-header {
		display: flex;
		justify-content: first baseline;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.guest-type {
		flex: 1;
		font-size: 26rpx;
		color: #666;
		font-weight: 500;
	}

	.delete-btn {
		/* text-align: right; */
		height: 50rpx;
		padding: 0 15rpx;
		/* background-color: #ff4d4f; */
		color: #ff4d4f;
		
		border-radius: 6rpx;
		font-size: 24rpx;
	}

	/* 表单样式 */
	.guest-form {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.name-group {
		display: flex;
		gap: 20rpx;
	}

	.name-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.name-label {
		font-size: 26rpx;
		color: #666;
		width: 60rpx;
	}

	.name-input {
		flex: 1;
		height: 70rpx;
		line-height: 70rpx;
		border-bottom: 1rpx solid #ddd;
		/* border-radius: 6rpx; */
		padding: 0 15rpx;
		font-size: 26rpx;
		/* background-color: #fff; */
	}

	.gender-group {
		display: flex;
		align-items: center;
	}

	.gender-label {
		font-size: 26rpx;
		color: #666;
		width: 60rpx;
	}

	.gender-buttons {
		display: flex;
		gap: 15rpx;
	}

	.gender-btn {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border: 1rpx solid #ddd;
		border-radius: 50%;
		font-size: 26rpx;
		background-color: #dedede;
	}

	.gender-btn.active {
		background-color: #007aff;
		color: #fff;
		border-color: #007aff;
	}

	/* 提示信息 */
	.tips {
		display: flex;
		align-items: flex-start;
		/* margin: 30rpx 0; */
		/* padding: 15rpx; */
		/* background-color: #fff8e6; */
		/* border-radius: 8rpx; */
	}

	.tips-icon {
		/* width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		margin-top: 3rpx; */
	}

	.tips-text {
		font-size: 24rpx;
		color: #666;
		line-height: 36rpx;
	}

	/* 提交按钮 */
	.submit-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #007aff;
		color: #fff;
		border-radius: 8rpx;
		font-size: 30rpx;
		margin-top: 20rpx;
	}
</style>